<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>上传图片</title>
		<link rel="stylesheet" href="/public/css/a.css">
	</head>
	<body>
		<div class="box">
			<input type="file" id="file">
			<button id="btn">上传</button>
		</div>
	</body>
</html>
<script src="/public/js/jquery.min.js"></script>
<script>
	$("#btn").click(function(){
		var files = $("#file")[0].files;
		if (files.length == 0) {
			return alert("请选择图片");
		}
		var file = files[0];
		console.log(file);

		var type = file.type;
		var flag = type == "image/jpeg" || type == "image/jpg"|| type =="image/png" || type =="image/gif";
		if(!flag) {
			return alert("上传格式不正确");
		}
		var reader = new FileReader();
		console.log(reader);
		reader.readAsDataURL(file);

		reader.onload = function(e) {
			console.log(e.target.result);

			var imageData = e.target.result.split(",")[1];

			$.ajax({
				type: "post",
				url: "http://localhost:8080/img",
				data: {
					name: file.name,
					imageData: imageData
				},
				success: function(data) {
					console.log(data);
				}
			});
		}
	});
</script>
